<template>
  <div id="cryptos">
    <div class="kline-charts">
      <ul class="flex px-32 pb-20 box-border justify-between text-grey fontStyle font-26"
        style="border-bottom:1px solid rgba(68,75,88,0.2);">
        <template v-if="!isChange">
          <li v-for="item in timeList" :key="item.id" class="mr-10" :class="{ 'textColor': item.id === timeValue.id }"
            @click="choiceTime(item)">{{ item.text }}</li>
        </template>
        <template v-else>
          <template v-if="isNight">
            <li v-for="item in timeList" :key="item.id" class="mr-10" :class="{ 'text-white': item.id === timeValue.id }"
              @click="choiceTime(item)">{{ item.text }}</li>
          </template>
          <template v-if="!isNight">
            <li v-for="item in timeList" :key="item.id" class="mr-10" :class="{ 'text-black': item.id === timeValue.id }"
              @click="choiceTime(item)">{{ item.text }}</li>
          </template>
        </template>
      </ul>
      <div class="relative">
        <div id="kline" class="h-828"></div>
        <div
          class="flex justify-center items-center text-center text-grey absolute left-0 top-0  w-full h-full z-10 mainBackground"
          v-if="chartLoading">
          <van-loading type="spinner"></van-loading>
        </div>
      </div>
      <ul class="flex  px-32 py-20 box-border justify-between text-grey font-26" v-if="showBottom"
        style="border-top:1px solid rgba(68,75,88,0.2);">
        <template v-if="!isChange">
          <li v-for="item in subTechnicalIndicatorTypes" :key="item" class="mr-20"
            :class="{ 'textColor': typeValue === item }" @click="choiceType(item)">{{ item }}</li>
        </template>
        <template v-else>
          <template v-if="isNight">
            <li v-for="item in subTechnicalIndicatorTypes" :key="item" class="mr-20"
              :class="{ 'text-white': typeValue === item }" @click="choiceType(item)">{{ item }}</li>
          </template>
          <template v-if="!isNight">
            <li v-for="item in subTechnicalIndicatorTypes" :key="item" class="mr-20"
              :class="{ 'text-black': typeValue === item }" @click="choiceType(item)">{{ item }}</li>
          </template>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
import { init, dispose } from 'klinecharts'
let chart = null
import { _getKline } from "@/service/trade.api";
import config from './config'
import { Loading } from 'vant';
export default {
  name: 'KlineCharts',
  data() {
    return {
      // symbol: 'btc',
      dealInfo: {},//交易对信息

      timeValue: {}, // 当前k线周期
      subTechnicalIndicatorTypes: ['MA', 'EMA', 'BOLL', 'VOL', 'MACD', 'KDJ', 'RSI'],
      typeValue: 'VOL',//图形类型
      klinecharts: null,//K线图实例
      chart: null,
      // resolution: '1',//分辨率
      // lang: 'en', //语言
      chartLoading: true, //加载动画
      paneId: '',
      chartData: [], // 图表数据
      timer: null
    }
  },
  computed: {
    timeList() {
      return [
        { id: '1min', time: '1min', text: this.$t('分时'), ts: 1 * 60 * 1000 },
        { id: '1mins', time: '1min', text: '1' + this.$t('分'), ts: 1 * 60 * 1000 },
        { id: '5min', time: '5min', text: '5' + this.$t('分'), ts: 5 * 60 * 1000 },
        { id: '15min', time: '15min', text: '15' + this.$t('分'), ts: 15 * 60 * 1000 },
        { id: '30min', time: '30min', text: '30' + this.$t('分'), ts: 30 * 60 * 1000 },
        { id: '60min', time: '60min', text: '1' + this.$t('小时'), ts: 60 * 60 * 1000 },
        { id: '4hour', time: '4hour', text: '4' + this.$t('小时'), ts: 4 * 60 * 60 * 1000 },
        { id: '1day', time: '1day', text: '1' + this.$t('天'), ts: 24 * 60 * 60 * 1000 },
        { id: '1week', time: '1week', text: '1' + this.$t('周'), ts: 7 * 24 * 60 * 60 * 1000 },
        { id: '1mon', time: '1mon', text: '1' + this.$t('月'), ts: 30 * 24 * 60 * 60 * 1000 }
      ]//时间列表
    }
  },
  components: {
    [Loading.name]: Loading
  },
  props: {
    symbol: {
      type: String,
      default: ''
    },
    updateKey: {
      type: Number,
      default: 0
    },
    updateData: {
      type: Object,
      default() {
        return {}
      }
    },
    showBottom: {
      type: Boolean,
      default: true
    },
    isChangeLine: {
      type: Boolean,
      default: false
    },
    isNight: {
      type: Boolean,
      defalult: true
    },
    isChange: {
      type: Boolean,
      defalult: false
    }
  },
  mounted() {
    this.initData()
  },
  beforeUnmount() {
    dispose('kline')
  },
  watch: {
    isChangeLine(val) {
      this.clearTimer()
      this.fetchData()
    },
    updateKey() { // 更新charts
      const dataList = chart.getDataList()
      if (dataList.length > 0) {
        const lastData = dataList[dataList.length - 1]
        const nowData = this.updateData
        const timeValue = this.timeValue
        const newData = {
          close: nowData.close / 1,
          current_time: lastData.current_time,
          high: lastData.high > nowData.close / 1 ? lastData.high : (nowData.close / 1),
          // high: lastData.high,
          line: timeValue.id,
          low: lastData.low < nowData.close / 1 ? lastData.low : (nowData.close / 1),
          // low: lastData.low,
          open: lastData.open,
          symbol: lastData.symbol,
          ts: lastData.ts, //
          timestamp: (nowData.ts - lastData.ts) < timeValue.ts ? lastData.ts : (lastData.ts + timeValue.ts),
          volume: lastData.volume / 1
        }
        this.$nextTick(() => {
          this.setChartType()
          chart.updateData(newData)
        })
      }
    }
  },
  methods: {
    initData() {
      this.timeValue = this.timeList[0]
      chart = init('kline', config);
      chart.setOffsetRightSpace(25)
      chart.setDataSpace(10)
      chart.setPriceVolumePrecision(4, 2)
      chart.createTechnicalIndicator('MA', false, { id: 'candle_pane' });
      this.paneId = chart.createTechnicalIndicator('VOL');
      this.fetchData()
    },
    fetchData(time) { // 获取数据
      this.chartLoading = true
      _getKline(this.symbol, this.timeValue.time || '1min').then(data => {
        this.chartLoading = false
        data.map(item => {
          item.timestamp = item.ts
        })
        let str = data[0] ? data[0].close.toString() : ''
        let length = 2
        if (str.indexOf('.') != -1) {
          length = str.split('.')[1].length
        }
        //let length = data[0] ? data[0].close.toString().split('.')[1].length : 4
        chart.setPriceVolumePrecision(length, 2)
        this.setChartType()
        console.log('>>>>>>>>>>data>>>>>', data)
        chart.applyNewData(data);
        this.$emit('updataLine', false)
      })
      // TODO:轮询，删掉上面那段，添加到定时器中
      // this.timer = setInterval(() => {
      //   _getKline(this.symbol, this.timeValue.time || time).then(data => {
      //     this.chartLoading = false
      //     data.map(item => {
      //       item.timestamp = item.ts
      //     })
      //     let str = data[0] ? data[0].close.toString() : ''
      //     let length = 2
      //     if (str.indexOf('.') != -1) {
      //       length = str.split('.')[1].length
      //     }
      //     //let length = data[0] ? data[0].close.toString().split('.')[1].length : 4
      //     chart.setPriceVolumePrecision(length, 2)
      //     this.setChartType()
      //     chart.applyNewData(data);
      //     this.$emit('updataLine', false)
      //   })
      // }, 1000);
    },
    setChartType() {
      let type = 'area'
      if (this.timeValue.id === '1min') {
        type = 'area'
      } else {
        type = 'candle_solid'
      }
      chart.setStyleOptions({
        candle: {
          type
        }
      })
    },
    choiceTime(value) { // 选择周期
      this.timeValue = value
      this.clearTimer()
      this.fetchData()
    },
    choiceType(type) { // 选择副线
      this.typeValue = type
      chart.createTechnicalIndicator(type, false, { id: this.paneId })
    },
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
  },
  deactivated() {
    this.clearTimer()
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";
// #kline {
//   // min-height: 828px;
//   height: 1200px;
// }
</style>
